/*
 * @Author       : 魏威 <1209562577@qq.com>
 * @Date         : 2021-09-26 19:25 周0
 * @Description  : 登录下的app
 */
import styled from '@emotion/styled';
import { Button, Dropdown, Menu } from 'antd';
import { ReactComponent as SoftwareLogo } from 'assets/software-logo.svg';
import { Row } from 'components/lib';
import { useAuthContext } from 'context/auth-context';
import React from 'react';
import ProjectListScreen from 'screens/project-list';

export const AuthenticatedApp = () => {
  const { logout, user } = useAuthContext();
  return (
    <Container>
      <Header between={true}>
        <HeaderLeft gap={4}>
          <SoftwareLogo width={'18rem'} color={'rgb(38,132,255)'} />
          <h2>项目</h2>
          <h2>用户</h2>
        </HeaderLeft>
        <HeaderRight>
          <Dropdown
            overlay={
              <Menu>
                <Menu.Item key={'logout'}>
                  <Button onClick={logout}>退出</Button>
                </Menu.Item>
              </Menu>
            }
          >
            <Button type="link">Hi, {user?.name}</Button>
          </Dropdown>
        </HeaderRight>
      </Header>
      <Main>
        <ProjectListScreen />
      </Main>
    </Container>
  );
};

/**
 * gird和flex应用场景
 * 1.从布局出发
 *    一维布局使用flex
 *    二维布局使用gird
 * 2.从内容出发，还是布局出发
 *
 */

const Container = styled.div`
  height: 100vh;
  display: grid;
  grid-template-rows: 6rem 1fr;
  grid-template-areas: 'header' 'main';
`;

const Header = styled(Row)`
  grid-area: header;
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`;

const HeaderLeft = styled(Row)``;

// const HeaderItem = styled.h3`
//   margin-right: 3rem;
// `;

const HeaderRight = styled.div``;

const Main = styled.header`
  grid-area: main;
`;

// const Nav = styled.nav`
//   grid-area: nav;
// `;

// const Aside = styled.aside`
//   grid-area: aside;
// `;

// const Footer = styled.footer`
//   grid-area: footer;
// `;
